<!DOCTYPE html>


<html class="site-demo-overflow">

<head>
    <meta charset="utf-8">
    <title>才源软件科技通用开发平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../public/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../../public/plugin/timePicker/css/timepicker.css" media="all" />
    <!-- tag标签选择器 -->
    <link rel="stylesheet" href="../../../public/plugin/formSelects/formSelects-v4.css" media="all" />
    <link rel="stylesheet" href="../../../public/css/public.css" media="all" />
    <style>
        .xm-select-linkage li{height: 20px; line-height: 24px;}
        .xm-select-linkage-group:nth-child(4n+1){background: #fff;}
    </style>

</head>

<body class="childrenBody">
    <blockquote class="layui-elem-quote layui-text">
        <p>此页面专门放需要扩展的表单插件样式</p>
    </blockquote>
    <form class="layui-form" action="">
        
        <div class="layui-col-lg4 layui-col-sm6">
            <div class="layui-form-item">
                <label class="layui-form-label">搜索选择框</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    <div class="layui-form-select" id="layui-form-select">
                        <dl class="layui-anim layui-anim-upbit" style="top: 0px;">
                            <dd lay-value="layer" >layer</dd>
                            <dd lay-value="form" class="">form</dd>
                            <dd lay-value="layim" class="">layim</dd>
                            <dd lay-value="element" class="">element</dd>
                            <dd lay-value="laytpl" class="">laytpl</dd>
                            <dd lay-value="upload" class="">upload</dd>
                            <dd lay-value="laydate" class="">laydate</dd>
                            <dd lay-value="laypage" class="">laypage</dd>
                            <dd lay-value="flow" class="">flow</dd>
                            <dd lay-value="util" class="">util</dd>
                            <dd lay-value="code" class="">code</dd>
                            <dd lay-value="tree" class="">tree</dd>
                            <dd lay-value="layedit" class="">layedit</dd>
                            <dd lay-value="nav" class="">nav</dd>
                            <dd lay-value="tab" class="">tab</dd>
                            <dd lay-value="table" class="">table</dd>
                            <dd lay-value="select" class="">select</dd>
                            <dd lay-value="checkbox" class="">checkbox</dd>
                            <dd lay-value="switch" class="">switch</dd>
                            <dd lay-value="radio" class="">radio</dd>
                        </dl>
                    </div>
                </div>
                <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo2" id="submit">搜索</a>
                (张双喜出品)
            </div>
        </div>

        
        <div class="layui-col-lg4 layui-col-sm6">
            <div class="layui-form-item">
                <label class="layui-form-label">带帮助</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    <i class="layui-icon layui-icon-about help" id="help"></i>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title layui-col-xs12">
            <legend>timePicker 时间段选择器</legend>
        </fieldset>
        <div class="layui-col-lg4 layui-col-sm6">
            <div class="layui-form-item">
                <label class="layui-form-label">时间段</label>
                <div class="layui-input-block">                   
                    <input type="text" class="layui-input" id="timePicker" placeholder="(样式不佳，慎用)" readonly>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title layui-col-xs12">
            <legend>formSelects</legend>
        </fieldset>
        <div class="layui-col-lg4 layui-col-sm6">
            <div class="layui-form-item">
                <label class="layui-form-label">基础多选</label>
                <div class="layui-input-block">   
                    <select name="city" xm-select="select1">
                        <option value="1" disabled="disabled">北京</option>
                        <option value="2" selected="selected">上海</option>
                        <option value="3">广州</option>
                        <option value="4" selected="selected">深圳</option>
                        <option value="5">天津</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-lg4 layui-col-sm6">
            <div class="layui-form-item">
                <label class="layui-form-label">联动多选</label>
                <div class="layui-input-block">                   
                    <select name="city" xm-select="select15">
                        <option value="">请选择, 此处是联动多选</option>
                    </select>
                </div>
            </div>
        </div>
    </form>

    <script src="../../../public/js/jquery.min.js"></script>
    <script src="../../../public/layui/layui.js" charset="utf-8"></script>
    <!-- 时间段(两个) -->
    <script src="../../../public/plugin/timePicker/js/timePicker.js"></script>
    <script src="../../../public/plugin/timePicker/js/moment.js"></script>
    <!-- tag标签选择器 -->
    <script src="../../../public/plugin/formSelects/formSelects-v4.js"></script>
    <script type="text/javascript">
        layui.use(['form','layer'], function(){
            var form = layui.form;
            var $ = layui.jquery, layer = layui.layer;


            $('#title').on('keyup', function(){
                var $this = this;
                var value = $(this).val().replace(/^\s*|\s*$/g,"");
                if(value.length>0){
                    //console.log(value)
                    var ddList = $('#title').parent().find("dd");
                    var i = 0;
                    for(var j= 0;j<ddList.length;j++){
                        ddList.eq(j).show();
                        var ddValue = ddList.eq(j).text().replace(/^\s*|\s*$/g,"");
                        //console.log(ddValue)
                        if(ddValue.indexOf(value)>=0){
                            ddList.eq(j).show();
                        }else{
                            i++;
                            ddList.eq(j).hide();
                        }
                    }
                    if(i!=ddList.length){
                        $($this).parent().find(".layui-form-select").addClass("layui-form-selected");
                    }else{
                        $($this).parent().find(".layui-form-select").removeClass("layui-form-selected");
                    }
                }
            });
            $('#title').parent().find("dd").on('mousedown ',function () {
                $('#title').val($(this).text())
                $(this).parents(".layui-form-select").removeClass("layui-form-selected");
            });
            $("#title").on('blur',function () {
                $(this).parent().find(".layui-form-select").removeClass("layui-form-selected");
            });


            form.on('submit(demo2)', function(data){
                alert($("#title").val())
            });


        });


        //帮助信息
        $('#help').on('click', function(){
            layer.tips('这里是你的帮助信息!', '#help', {
                tips: [4, '#393D49']
            });
        });



        //时间段
        layui.config({
            base: '/public/plugin/timePicker/js/',
        });
        layui.use(['timePicker'],function () {
            var timePicker = layui.timePicker;
            timePicker.render({
                elem: '#timePicker', //定义输入框input对象
                options:{      //可选参数timeStamp，format
                    timeStamp:false,//true开启时间戳 开启后format就不需要配置，false关闭时间戳 //默认false
                    format:'YYYY-MM-DD',//格式化时间具体可以参考moment.js官网 默认是YYYY-MM-DD HH:ss:mm
                },
            });
            
        })


        //tag标签选择器
        layui.formSelects.data('select15', 'local', {
            arr: [
                {
                    "name": "北京", 
                    "value": 1, 
                    "children": [
                        {"name": "北京市1", "value": 12, "children": [
                            {"name": "朝阳区1", "value": 13, "children": []},
                            {"name": "朝阳区2", "value": 14, "children": []},
                            {"name": "朝阳区3", "value": 15, "children": []},
                            {"name": "朝阳区4", "value": 16, "children": []},
                        ]},
                        {"name": "北京市2", "value": 17, "children": []},
                        {"name": "北京市3", "value": 18, "children": []},
                        {"name": "北京市4", "value": 19, "children": []},
                    ]
                },
                {
                    "name": "天津", 
                    "value": 2, 
                    "children": [
                        {"name": "天津市1", "value": 51, "children": []},
                    ]
                },
            ],
            linkage: true
        });

        //如果有需要默认值的小伙伴请使用formSelects.value
        var formSelects = layui.formSelects;
        formSelects.value('select15', ['1/12/13', '2/51'], )

	</script>
</body>

</html>